<template>
  <div>
    <h2>事件绑定指令</h2>
    <p>{{age}}</p>
    <!-- 事件绑定指令语法：v-on:事件名="处理程序"，‘v-on:’可以简写成‘@事件名="处理程序"’ -->
    <!-- <button v-on:事件名="处理程序">按钮</button> -->
     <!-- <button @事件名="处理程序">按钮</button> -->

     <!-- 事件处理程序，如果代码非常简单，直接写到<template>这个区域即可 -->
      <!-- 处理程序，代码只使用vue中定义好的data数据或methods方法 -->
     <button @click='age++'>+1</button>

     <!-- 事件处理程序，如果代码非常多，可以用方法。方法必须定义到和data平级的methods中 -->
    <button @click="changeAge">按钮</button>
  </div>
</template>

<script>
export default {
data(){
  return{
    age:20
  }
},
methods:{
  changeAge(){
    // vue中，找data数据、methods方法……都会死ton过this直接找【这是vue中固定的语法】
    this.age--
    console.log(123);
  }
  
}
}
</script>

<style>

</style>